<template>
  <div>
  <div class="institutions-management">
    医生管理
  </div>
  <div class="box1">
  <div>
<span>所属机构:</span>
  <el-select v-model="options.label" placeholder="请选择" size="large">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</div>

<div>
<span>所属团队:</span>
  <el-select v-model="optionss.label" placeholder="请选择" size="large">
    <el-option
      v-for="item in optionss"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</div>
<div>
<span>医生标签:</span>
  <el-select v-model="optionsss.label" placeholder="请选择" size="large">
    <el-option
      v-for="item in optionsss"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</div>
      <el-button type="primary" size="large" class="btn" @click="creatys">新增医生信息</el-button>
    </div>
      <el-input v-model="input4" class="w-50 m-2" placeholder="请输入关键字" size="large">
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
     
      <el-table
      stripe
        class="list"
      ref="multipleTableRef"
      :data="users"
      style="width: 100%"
      header-align="center"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" width="120" align="center">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column property="ysphoto" label="头像" width="120" align="center"/>
      <el-table-column property="ysname" label="姓名" width="120" align="center"/>
      <el-table-column property="ysphone" label="联系电话" width="120" align="center"/>
      <el-table-column property="yser" label="角色" width="120" align="center"/>
      <el-table-column property="ystd" label="所属团队" width="120" align="center"/>
      <el-table-column property="ysjg" label="所属机构" width="200" align="center"/>
      <el-table-column property="tdzt" label="状态" width="120" align="center">
        <el-switch
    v-model="value"
    active-color="#3DD4A7"
    inline-prompt
    size="large"
    active-text="启用"
    inactive-text="禁用"
  />
      </el-table-column>
      <el-table-column property="tdxq" label="详情" width="100" align="center">
        <span>详情</span>
      </el-table-column>
    </el-table>
    <div class="pages">
    <el-pagination background layout="prev, pager, next" :total="100" />
  </div>
    </div> 
</template>

<script>
export default {
  name: 'DoctorManagement',
  data(){
      return{
        users: Array(10).fill(null).map((_, index) => ({
        "ysphoto": "图片" + index,
        "ysname": "胡hh",
        "ysphone": "138028344" + ('0' + index).slice(-2),
        "yser": "全科医师",
        "ystd": "汪小敏团队" ,
        "ysjg": "北京市怀柔区洛西社区卫生服务站" ,
        "id": index + 20220
      })),
      value:true,
      options:[
  {
    value: 'Option2',
    label: '罗西社区服务中心',
  },
  {
    value: 'Option3',
    label: '天明服务中心',
  },
  {
    value: 'Option4',
    label: '民进服务中心',
  },
    ],
    optionss:[
  {
    value: 'Option2',
    label: '胡hh团队',
  },
  {
    value: 'Option3',
    label: 'cb团队',
  },
  {
    value: 'Option4',
    label: 'jzy团队',
  },
    ],
    optionsss:[
  {
    value: 'Option2',
    label: '慢病护理',
  },
  {
    value: 'Option3',
    label: '高血糖',
  },
  {
    value: 'Option4',
    label: '高血压',
  },
    ],
      }
    },
    methods: {
      creatys(){
        this.$router.push('newys')
      }
    },
}
</script>

<style lang="less" scoped>
.w-50{
  width: 300px;
  float: left;
  margin-bottom: 20px;
  margin-left: 25px;
}
.btn{
  float: right;
}
.list{
  text-align: center;

}
.pages{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box1{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
